<script setup lang='ts'>
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { userLogin } from "../api/api";
const router = useRouter()
const mail = localStorage.getItem('mail') as string
const userName = ref()
const integral = ref()
const isLogin = ref()
onMounted(async () => {
    const res = await userLogin({ _id: mail })    
    if(res.data.code !== '200'){
        localStorage.setItem('token','')
        localStorage.setItem('mail','')
        isLogin.value = false
        return
    }
    userName.value = res.data.data.mail
    integral.value = res.data.data.frequency
    isLogin.value = true
})
const toLogin = () => {
    router.push({ name: 'login' })
}

</script>

<template>
    <div class="NotuserData" @click="toLogin" v-if="!isLogin">
        <img style="width: 80px;" src="../assets/t.png" alt="">
        <h3>点击登录</h3>
    </div>
    <div class="userData" v-if="isLogin">
        <img style="width: 80px;" src="../assets/t.png" alt="">
        <h4>{{userName}}</h4>
        <p>积分：<span>{{integral}}</span></p>
    </div>
</template>

<style scoped>
.NotuserData {
    width: 100%;
    height: 160px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 20px;
}

.userData {
    width: 100%;
    height: 160px;
    text-align: center;
    box-sizing: border-box;
    padding: 20px;
}
h4{
    margin-top: 10px;
}
p{
    color: #999;
    margin-top: 5px;
    font-size: 12px
}
</style>